<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/sample.html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}

			#l-map {
				height: 100%;
				width: 78%;
				float: left;
				border-right: 2px solid #bcbcbc;
			}

			#r-result {
				height: 100%;
				width: 20%;
				float: left;
			}

			/*去除百度地图版权*/
			.anchorBL {
				display: none;
			}
		</style>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=BC76a27687a33d846d9940a36844ccd7"></script>
    <title>当前设备位置</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("allmap", {
			mapType: BMAP_HYBRID_MAP
		});
		var myWorkPoint = new BMap.Point(112.509875, 34.694541); //图书馆位置
		map.centerAndZoom(myWorkPoint, 18); //设置地图中心，缩放比例
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

		var top_left_control = new BMap.ScaleControl({
			anchor: BMAP_ANCHOR_TOP_LEFT
		}); // 左上角，添加比例尺
		map.addControl(top_left_control); // 添加控件

		var already = [];	// 用来存放已经走过的点
		// 添加当前位置
		function addMarker(x, y) {
			removeOverlay(); //清除上一个标记点
			var convertor = new BMap.Convertor();
			var point2 = new BMap.Point(y, x); // 创建传入点
			var pointArr = [];
			pointArr.push(point2);
			convertor.translate(pointArr, 1, 5, translateCallback);
			// map.centerAndZoom(point2,18);	//设置地图中心，缩放比例
			// var marker = new BMap.Marker(point2);	// 创建标注
			// map.addOverlay(marker);	// 将标注添加到地图中
			// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		};
		//坐标转换完之后的回调函数	当前位置
		translateCallback = function(data) {
			if (data.status === 0) {
				already.push(data.points[0])
				var marker = new BMap.Marker(data.points[0]);
				map.addOverlay(marker);
				var label = new BMap.Label("当前位置", {
					offset: new BMap.Size(20, -10)
				});
				marker.setLabel(label); //添加百度label
				map.setCenter(data.points[0]);
				wyy();
			}
		};
		
		var defaultRouter = [];	// 用来存放规划路径的点
        // 添加规划路径
        function addRouter(x, y) {
            removeOverlay(); //清除上一个标记点
            var convertor = new BMap.Convertor();
            var point2 = new BMap.Point(y, x); // 创建传入点
            var pointArr = [];
            pointArr.push(point2);
            convertor.translate(pointArr, 1, 5, translateCallbackRouter);
            // map.centerAndZoom(point2,18);	//设置地图中心，缩放比例
            // var marker = new BMap.Marker(point2);	// 创建标注
            // map.addOverlay(marker);	// 将标注添加到地图中
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        };
        //坐标转换完之后的回调函数	规划路径
        translateCallbackRouter = function(data) {
            if (data.status === 0) {
                data.points.forEach((item, index, array)=>{
                    console.log(item);
                    defaultRouter.push(item);
                });
                wyy();
            }
        };
        // 添加规划路径(所有点)
        function addRouterAllPoint(points) {
            removeOverlay(); //清除上一个标记点
            var convertor = new BMap.Convertor();
            var num = Math.ceil(points.length / 10);    // 向上取整, 每10个一组, 需要num组

            var pointArr = [];            //先声明一维
            for(var k=0;k<num;k++){       //一维长度为num,num为变量，可以根据实际情况改变
                pointArr[k]=[];           //声明二维，每一个一维数组里面的一个元素都是一个数组；
            }
            var i = 0;  // 该往第i组里装了
            points.forEach((item, index, array)=>{
                i = Math.floor(index / 10); // 向下取整
                var point2 = new BMap.Point(item[1], item[0]); // 创建传入点
                pointArr[i].push(point2);   // 装入
            });
            for (i = 0; i < pointArr.length; i ++){
                console.log(pointArr[i]);
                convertor.translate(pointArr[i], 1, 5, function(data) {
                    if (data.status === 0) {
                        data.points.forEach((item, index, array)=>{
                            defaultRouter.push(item);
                        });
                    }
                });
            }
            setTimeout("wyy()", 200)
        };
		// 添加规划路径（所有点） 百度地图坐标
		function addRouterAllPointBMap(points) {
            clearAllInfo();	//清除上一个标记点
			defaultRouter = [];	// 清除预设点路径
            for (var i in points){
                defaultRouter.push(new BMap.Point(points[i].x, points[i].y)); // 创建传入点
            }
            wyy();
		};
		//向map添加折线	规划路径
		function wyy() {
            //绘制箭头及其样式
            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.6,//图标缩放大小
                strokeColor:'#996699',//设置矢量图标的线填充颜色
                strokeWeight: 2,//设置线宽
            });
            var icons = new BMap.IconSequence(sy, '100%', '10%',false);//设置为true，可以对轨迹进行编辑
			// 创建折线	规划路径
			var polyline1 = new BMap.Polyline(defaultRouter, {
				strokeColor: '#FFCCCC',
				strokeWeight: 10,
				strokeOpacity: 1,
                icons:[icons]
			});
			map.addOverlay(polyline1); // 增加折线
            // 创建折线	当前位置
            var polyline = new BMap.Polyline(already, {
                strokeColor: '#0099CC',
                strokeWeight: 10,
                strokeOpacity: 1
            });
            map.addOverlay(polyline); // 增加折线
		}

		// 清除覆盖物
		function removeOverlay() {
			map.clearOverlays();
		};
		
		function clearAllInfo() {
            map.clearOverlays();
            defaultRouter = [];
            already = [];
        }

		// map.setMapStyleV2({
		// 	styleId: 'c404b2d5ac8bcd93a850369909def0ae'
		// })
	</script>
</html>
